import { useNavigate } from "react-router-dom";
import { useState } from "react";
import styles from "./Login.module.css"; // 注意是.module.css（单数形式）
import { message } from "antd";
const Login = () => {
  const navigate = useNavigate();
  const [messageApi, contextHolder] = message.useMessage();
  // 1. 定义状态存储存储输入框的值
  const [formData, setFormData] = useState({
    username: "admin", // 用户名
    password: "123456", // 密码
  });
  // 2. 处理输入框变化事件
  const handleInputChange = (e) => {
    console.log("e===", e.target);
    // 获取输入框的 name 和 value
    const { name, value } = e.target;
    // console.log(name, value);
    // 更新状态
    setFormData({
      ...formData, // 保留其他字段的值
      [name]: value, // 更新当前输入框对应的值（方括号是计算属性名）
    });
  };
  // 3. 登录处理
  const handleLogin = () => {
    // 可以在这里获取输入框的值
    console.log("用户名:", formData.username);
    console.log("密码:", formData.password);
    if (formData.username === "admin" && formData.password === "123456") {
      localStorage.setItem("isLogin", "true");
      navigate("/");
      return false;
    }
    messageApi.info("用户名或密码错误");
    // alert('用户名或密码错误')
  };

  return (
    <>
      {contextHolder}
      <div className={styles.loginContainer}>
        <div className={styles.loginCard}>
          <h1 className={styles.loginTitle}>用户登录</h1>
          <div className={styles.formGroup}>
            <label className={styles.formLabel} htmlFor="username">
              用户名
            </label>
            <input
              type="text"
              id="username"
              className={styles.formInput}
              placeholder="请输入用户名"
              name="username"
              value={formData.username} // 绑定值
              onChange={handleInputChange} // 绑定变化事件
            />
          </div>

          <div className={styles.formGroup}>
            <label className={styles.formLabel} htmlFor="password">
              密码
            </label>
            <input
              type="password"
              id="password"
              className={styles.formInput}
              placeholder="请输入密码"
              name="password"
              value={formData.password} // 绑定值
              onChange={handleInputChange} // 绑定变化事件
            />
          </div>

          <button className={styles.loginButton} onClick={handleLogin}>
            登录
          </button>

          <div className={styles.loginLinks}>
            <a href="/forgot-password" className={styles.link}>
              忘记密码？
            </a>
            <a href="/register" className={styles.link}>
              注册账号
            </a>
          </div>
        </div>
      </div>
    </>
  );
};

export default Login;
